$light-gray: #bbbbc8;
$dark-gray: #7f7d8e;
$deep-purple: #534c77;
$primary: #494ece;
$common-bg: #f8f8fa;
$link: #409eff;

.history-container {
  height: 100%;
  .history-title {
    height: 24px;
    padding: 0px 12px;
    margin-bottom: 12px;

    background-color: #EBEDF0;

    font-size: 12px;
    color: #3145A6;
  }

  .tool-bar {
    margin-bottom: 12px;
    .tool-item {
      display: flex;
      align-items: center;
      margin-right: 24px;
      .title {
        white-space: nowrap;
        margin-right: 10px;
        color: $dark-gray;
        font-weight: bold;
      }
      .el-select__tags {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow: hidden;
      }
    }
  }

  .table-wrapper {
    border-radius: 4px;
    height: calc(100% - 72px);

    .notes-showing {
      display: block;
      max-width: 60%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      padding-right: 5px;
    }

    .notes-editor {
      width: 120px;
    }

    .between-line {
      background-color: #FAFBFC;
    }
  }
  
  .t-header {
    height: 67px;
    color: #4159D1;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
  }
  .t-row {
    height: 48px;
    font-size: 14px;
    color: $dark-gray;
  }
  .el-table th{
    padding: 0;
  }
  .el-table td {
    border-bottom: 0px;
  }
  .el-table .cell {
    padding-left: 24px;
  }
  .el-input input{
    width: 120px;
    height: 24px;
    border-radius: 2px;
    border: 2px solid #EBEDF0;
    .el-input__icon {
      line-height: 24px;
    }
  }
  .el-select__tags {
    border-radius: 2px;
    height: 16px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  .el-tag {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 2px;
    height: 16px;
    margin-right: 2px;
    .el-select__tags-text {
      line-height: 16px;
    }
    .el-tag__close {
      line-height: 16px;
      margin-top: 0px;
    }
  }
}
  .el-select__caret {
    line-height: 24px;
  }
  .el-table .history-stripe {
    background: #ededfa;
  }
  .el-button{
    padding: 4px 16px;
  }
  .progress-wrapper {
    .progress-bg {
      $h: 5px;
      width: 50%;
      height: $h;
      border-radius: $h;
      background: #e8e8ef;
      overflow: hidden;
      .progress-block {
        height: 100%;
        background: $primary;
      }
    }
    .progress-text {
      margin-left: 7px;
      color: $primary;
      font-size: 16px;
    }
  }
}
